<!--
 * 员工新建/编辑弹窗
-->
<template>
  <el-dialog
    :title="dialogData.type == 'ADD' ? '新增员工' : '编辑员工'"
    :visible.sync="dialogData.show"
    :before-close="handleClose"
    width="520px"
    append-to-body
  >
    <el-form
      ref="staffInfoForm"
      :model="staffInfoForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="员工名称：" prop="name">
        <el-input
          class="input-area"
          v-model="staffInfoForm.name"
          placeholder="请输入员工名称"
          maxlength="32"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别：" prop="gender">
        <el-radio v-model="staffInfoForm.gender" label="MALE">男</el-radio>
        <el-radio v-model="staffInfoForm.gender" label="FEMALE">女</el-radio>
      </el-form-item>
      <el-form-item prop="phoneContent" label="手机号：">
        <div class="form-item-mobile">
          <el-select v-model="staffInfoForm.dialCode" placeholder="请选择">
            <el-option-group
              v-for="group in countryCode"
              :key="group.firstLetter"
              :label="group.firstLetter"
            >
              <el-option
                v-for="item in group.list"
                :key="item.phoneCode"
                :label="item.phoneCode"
                :value="item.phoneCode"
                style="width: 385px"
              >
                <span style="float: left">{{ item.nameZHCN }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.phoneCode
                }}</span>
              </el-option>
            </el-option-group>
          </el-select>
          <el-input
            ref="phoneContent"
            v-model="staffInfoForm.phoneContent"
            placeholder="请输入手机号(登录账号)"
            name="phoneContent"
            type="phone"
            tabindex="1"
            auto-complete="on"
            maxlength="11"
          />
        </div>
      </el-form-item>
      <el-form-item label="所属部门：" prop="department">
        <el-input
          class="input-area"
          v-model="staffInfoForm.department"
          placeholder="请输入所属部门"
          maxlength="64"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属角色：" prop="roleId">
        <el-select
          class="select-area"
          v-model="staffInfoForm.roleId"
          placeholder="请选择角色"
        >
          <el-option
            v-for="(item, index) in roleList"
            :key="'roleId' + index"
            :label="item.roleName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <div class="line-center">
        <el-button class="dialog-btn" @click="dialogCancel" plain
          >取消</el-button
        >
        <el-button
          class="dialog-btn"
          style="margin-left: 8px"
          @click="dialogConfirm"
          type="primary"
          v-preventReClick
          >确认</el-button
        >
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
//接口
import { getPhone } from "@/api/login";
import { addNewStaff, editStaff } from "@/api/staff_role";

export default {
  props: {
    dialogData: {
      type: Object,
    },
    roleList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      floorPoints: [],
      pointerList: [],
      mapPicUrl: "",
      staffInfoForm: {
        name: "",
        gender: "MALE",
        phoneContent: "",
        department: "",
        roleId: "",
        dialCode: "+86",
      },
      rules: {
        name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        phoneContent: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        department: [
          { required: true, message: "请输入部门", trigger: "blur" },
        ],
        roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      countryCode: [],
    };
  },
  watch: {
    "dialogData.show": {
      immediate: true,
      handler: function (val, oldVal) {
        if (val) {
          this.$nextTick(() => {
            if (this.dialogData.type == "EDIT") {
              this.staffInfoForm = JSON.parse(JSON.stringify(this.dialogData));
            } else {
              this.staffInfoForm = {
                name: "",
                gender: "MALE",
                phoneContent: "",
                department: "",
                roleId: "",
                dialCode: "+86",
              };
            }
            this.$refs.staffInfoForm.resetFields();
          });
        }
      },
    },
  },
  created() {
    this.handleGetCountryCode();
  },
  methods: {
    //关闭弹窗
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.dialogData.show = false;
        })
        .catch((_) => { });
    },
    
    // 获取国家code
    handleGetCountryCode() {
      getPhone()
        .then((response) => {
          this.countryCode = response.data;
        })
        .catch(() => {});
    },
    //关闭弹窗,仅关闭
    closeDialog() {
      this.dialogData.show = false;
    },
    //取消按钮
    dialogCancel() {
      this.dialogData.show = false;
    },
    //确认按钮
    dialogConfirm() {
      switch (this.dialogData.type) {
        case "ADD": {
          this.handleAddNewStaff();
          break;
        }
        case "EDIT": {
          this.handleEditStaff();
          break;
        }
        default: {
          this.$message.error("异常弹窗");
          break;
        }
      }
    },
    //新增员工
    handleAddNewStaff() {
      this.$refs.staffInfoForm.validate((valid) => {
        if (valid) {
          addNewStaff({
            roleIdList: [this.staffInfoForm.roleId],
            ...this.staffInfoForm,
          })
            .then((response) => {
              this.$emit("dialogConfirm");
              this.dialogData.show = false;
              this.$message.success("新增成功");
            })
            .catch(() => {
              // this.$message.error('新增失败')
            });
        } else {
          return false;
        }
      });
    },
    //编辑员工
    handleEditStaff() {
      this.$refs.staffInfoForm.validate((valid) => {
        if (valid) {
          editStaff({
            id: this.dialogData.id,
            roleIdList: [this.staffInfoForm.roleId],
            ...this.staffInfoForm,
          })
            .then((response) => {
              this.$emit("dialogConfirm");
              this.dialogData.show = false;
              this.$message.success("修改成功");
            })
            .catch(() => {
              // this.$message.error('修改失败')
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.form-item-mobile {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  color: #fff;
  margin-bottom: 0px;
  border-radius: 4px;
  border: 1px solid #dfe5ee;

  input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    color: #030617;
  }

  .el-input__inner {
    padding: 0;
  }

  //下划线去掉
  .el-select-group__wrap:not(:last-of-type) {
    height: 0;
  }

  .el-select-group__wrap::after {
    height: 0;
  }

  .el-select-group__wrap {
    padding-bottom: 7px;
  }

  .el-select {
    .el-input__inner {
      padding-left: 12px;
    }

    .el-input__suffix {
      right: 4px;
    }

    .el-input--suffix {
      min-width: 76px;
      max-width: 110px;
      right: 0px;
    }

    .el-select__caret {
      color: #000;
    }
  }
}
</style>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__title {
    font-weight: normal;
  }
}

.dialog-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.input-area {
  width: 385px;
}

.select-area {
  width: 385px;
}

.line-center {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.dialog-btn {
  height: 32px;
  width: 120px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
</style>